<template>
  <div
    id="report-container"
    v-loading.fullscreen.lock="fullscreenLoading"
    element-loading-text="加载中"
  >
    <el-button icon="el-icon-download" type="primary" @click="downloadPDF"
      >下载PDF</el-button
    >
    <!-- 概要 -->
    <div ref="reportDetailRef" class="container">
      <div class="card">
        <div class="head">
          <span class="head-left"></span>
          <div class="head-number">概要</div>
          <div class="head-right">
            {{ date }}
          </div>
        </div>

        <div class="middleEcharts" id="middleEcharts" ref="canvans0"></div>
      </div>

      <!-- b2 -->

      <div class="p-chart" v-show="isShowB2">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B2 | temp1</span>
        </div>
        <div ref="canvans1" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b2.temp1"
        />
      </div>

      <div class="p-chart" v-show="isShowB2">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B2 | temp2</span>
        </div>
        <div ref="canvans2" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b2.temp2"
        />
      </div>

      <div class="p-chart" v-show="isShowB2">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B2 | temp3</span>
        </div>
        <div ref="canvans3" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b2.temp3"
        />
      </div>

      <div class="p-chart" v-show="isShowB2">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B2 | temp4</span>
        </div>
        <div ref="canvans4" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b2.temp4"
        />
      </div>

      <div class="p-chart" v-show="isShowB2">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B2 | temp5</span>
        </div>
        <div ref="canvans5" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b2.temp5"
        />
      </div>

      <div class="p-chart" v-show="isShowB2">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B2 | temp6</span>
        </div>
        <div ref="canvans6" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b2.temp6"
        />
      </div>

      <div class="p-chart" v-show="isShowB2">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B2 | temp7</span>
        </div>
        <div ref="canvans7" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b2.temp7"
        />
      </div>

      <div class="p-chart" v-show="isShowB2">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B2 | temp8</span>
        </div>
        <div ref="canvans8" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b2.temp8"
        />
      </div>

      <div class="p-chart" v-show="isShowB2">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B2 | temp9</span>
        </div>
        <div ref="canvans9" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b2.temp9"
        />
      </div>

      <div class="p-chart" v-show="isShowB2">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B2 | temp10</span>
        </div>
        <div ref="canvans10" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b2.temp10"
        />
      </div>

      <div class="p-chart" v-show="isShowB2">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B2 | temp11</span>
        </div>
        <div ref="canvans11" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b2.temp11"
        />
      </div>

      <div class="p-chart" v-show="isShowB2">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B2 | temp12</span>
        </div>
        <div ref="canvans12" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b2.temp12"
        />
      </div>

      <div class="p-chart" v-show="isShowB2">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B2 | temp13</span>
        </div>
        <div ref="canvans13" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b2.temp13"
        />
      </div>

      <div class="p-chart" v-show="isShowB2">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B2 | temp14</span>
        </div>
        <div ref="canvans14" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b2.temp14"
        />
      </div>

      <div class="p-chart" v-show="isShowB2">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B2 | temp15</span>
        </div>
        <div ref="canvans15" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b2.temp15"
        />
      </div>

      <div class="p-chart" v-show="isShowB2">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B2 | temp16</span>
        </div>
        <div ref="canvans16" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b2.temp16"
        />
      </div>
      <!-- b3 -->

      <div class="p-chart" v-show="isShowB3">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B3 | temp1</span>
        </div>
        <div ref="canvans17" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b3.temp1"
        />
      </div>

      <div class="p-chart" v-show="isShowB3">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B3 | temp2</span>
        </div>
        <div ref="canvans18" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b3.temp2"
        />
      </div>

      <div class="p-chart" v-show="isShowB3">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B3 | temp3</span>
        </div>
        <div ref="canvans19" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b3.temp3"
        />
      </div>

      <div class="p-chart" v-show="isShowB3">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B3 | temp4</span>
        </div>
        <div ref="canvans20" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b3.temp4"
        />
      </div>

      <div class="p-chart" v-show="isShowB3">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B3 | temp5</span>
        </div>
        <div ref="canvans21" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b3.temp5"
        />
      </div>

      <div class="p-chart" v-show="isShowB3">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B3 | temp6</span>
        </div>
        <div ref="canvans22" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b3.temp6"
        />
      </div>

      <div class="p-chart" v-show="isShowB3">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B3 | temp7</span>
        </div>
        <div ref="canvans23" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b3.temp7"
        />
      </div>

      <div class="p-chart" v-show="isShowB3">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B3 | temp8</span>
        </div>
        <div ref="canvans24" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b3.temp8"
        />
      </div>

      <div class="p-chart" v-show="isShowB3">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B3 | temp9</span>
        </div>
        <div ref="canvans25" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b3.temp9"
        />
      </div>

      <div class="p-chart" v-show="isShowB3">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B3 | temp10</span>
        </div>
        <div ref="canvans26" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b3.temp10"
        />
      </div>

      <div class="p-chart" v-show="isShowB3">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B3 | temp11</span>
        </div>
        <div ref="canvans27" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b3.temp11"
        />
      </div>

      <div class="p-chart" v-show="isShowB3">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B3 | temp12</span>
        </div>
        <div ref="canvans28" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b3.temp12"
        />
      </div>

      <div class="p-chart" v-show="isShowB3">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B3 | temp13</span>
        </div>
        <div ref="canvans29" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b3.temp13"
        />
      </div>

      <div class="p-chart" v-show="isShowB3">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B3 | temp14</span>
        </div>
        <div ref="canvans30" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b3.temp14"
        />
      </div>

      <div class="p-chart" v-show="isShowB3">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B3 | temp15</span>
        </div>
        <div ref="canvans31" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b3.temp15"
        />
      </div>

      <div class="p-chart" v-show="isShowB3">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B3 | temp16</span>
        </div>
        <div ref="canvans32" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b3.temp16"
        />
      </div>
      <!-- b4 -->

      <div class="p-chart" v-show="isShowB4">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B4 | temp1</span>
        </div>
        <div ref="canvans33" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b4.temp1"
        />
      </div>

      <div class="p-chart" v-show="isShowB4">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B4 | temp2</span>
        </div>
        <div ref="canvans34" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b4.temp2"
        />
      </div>

      <div class="p-chart" v-show="isShowB4">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B4 | temp3</span>
        </div>
        <div ref="canvans35" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b4.temp3"
        />
      </div>

      <div class="p-chart" v-show="isShowB4">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B4 | temp4</span>
        </div>
        <div ref="canvans36" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b4.temp4"
        />
      </div>

      <div class="p-chart" v-show="isShowB4">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B4 | temp5</span>
        </div>
        <div ref="canvans37" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b4.temp5"
        />
      </div>

      <div class="p-chart" v-show="isShowB4">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B4 | temp6</span>
        </div>
        <div ref="canvans38" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b4.temp6"
        />
      </div>

      <div class="p-chart" v-show="isShowB4">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B4 | temp7</span>
        </div>
        <div ref="canvans39" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b4.temp7"
        />
      </div>

      <div class="p-chart" v-show="isShowB4">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B4 | temp8</span>
        </div>
        <div ref="canvans40" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b4.temp8"
        />
      </div>

      <div class="p-chart" v-show="isShowB4">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B4 | temp9</span>
        </div>
        <div ref="canvans41" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b4.temp9"
        />
      </div>

      <div class="p-chart" v-show="isShowB4">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B4 | temp10</span>
        </div>
        <div ref="canvans42" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b4.temp10"
        />
      </div>

      <div class="p-chart" v-show="isShowB4">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B4 | temp11</span>
        </div>
        <div ref="canvans43" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b4.temp11"
        />
      </div>

      <div class="p-chart" v-show="isShowB4">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B4 | temp12</span>
        </div>
        <div ref="canvans44" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b4.temp12"
        />
      </div>

      <div class="p-chart" v-show="isShowB4">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B4 | temp13</span>
        </div>
        <div ref="canvans45" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b4.temp13"
        />
      </div>

      <div class="p-chart" v-show="isShowB4">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B4 | temp14</span>
        </div>
        <div ref="canvans46" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b4.temp14"
        />
      </div>

      <div class="p-chart" v-show="isShowB4">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B4 | temp15</span>
        </div>
        <div ref="canvans47" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b4.temp15"
        />
      </div>

      <div class="p-chart" v-show="isShowB4">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B4 | temp16</span>
        </div>
        <div ref="canvans48" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b4.temp16"
        />
      </div>
      <!-- b2 -->

      <div class="p-chart" v-show="isShowB5">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B5 | temp1</span>
        </div>
        <div ref="canvans49" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b5.temp1"
        />
      </div>

      <div class="p-chart" v-show="isShowB5">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B5 | temp2</span>
        </div>
        <div ref="canvans50" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b5.temp2"
        />
      </div>

      <div class="p-chart" v-show="isShowB5">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B5 | temp3</span>
        </div>
        <div ref="canvans51" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b5.temp3"
        />
      </div>

      <div class="p-chart" v-show="isShowB5">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B5 | temp4</span>
        </div>
        <div ref="canvans52" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b5.temp4"
        />
      </div>

      <div class="p-chart" v-show="isShowB5">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B5 | temp5</span>
        </div>
        <div ref="canvans53" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b5.temp5"
        />
      </div>

      <div class="p-chart" v-show="isShowB5">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B5 | temp6</span>
        </div>
        <div ref="canvans54" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b5.temp6"
        />
      </div>

      <div class="p-chart" v-show="isShowB5">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B5 | temp7</span>
        </div>
        <div ref="canvans55" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b5.temp7"
        />
      </div>

      <div class="p-chart" v-show="isShowB5">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B5 | temp8</span>
        </div>
        <div ref="canvans56" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b5.temp8"
        />
      </div>

      <div class="p-chart" v-show="isShowB5">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B5 | temp9</span>
        </div>
        <div ref="canvans57" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b5.temp9"
        />
      </div>

      <div class="p-chart" v-show="isShowB5">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B5 | temp10</span>
        </div>
        <div ref="canvans58" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b5.temp10"
        />
      </div>

      <div class="p-chart" v-show="isShowB5">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B5 | temp11</span>
        </div>
        <div ref="canvans59" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b5.temp11"
        />
      </div>

      <div class="p-chart" v-show="isShowB5">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B5 | temp12</span>
        </div>
        <div ref="canvans60" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b5.temp12"
        />
      </div>

      <div class="p-chart" v-show="isShowB5">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B5 | temp13</span>
        </div>
        <div ref="canvans61" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b5.temp13"
        />
      </div>

      <div class="p-chart" v-show="isShowB5">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B5 | temp14</span>
        </div>
        <div ref="canvans62" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b5.temp14"
        />
      </div>

      <div class="p-chart" v-show="isShowB5">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B5 | temp15</span>
        </div>
        <div ref="canvans63" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b5.temp15"
        />
      </div>

      <div class="p-chart" v-show="isShowB5">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B5 | temp16</span>
        </div>
        <div ref="canvans64" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b5.temp16"
        />
      </div>
      <!-- b2 -->

      <div class="p-chart" v-show="isShowB6">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B6 | temp1</span>
        </div>
        <div ref="canvans65" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b6.temp1"
        />
      </div>

      <div class="p-chart" v-show="isShowB6">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B6 | temp2</span>
        </div>
        <div ref="canvans66" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b6.temp2"
        />
      </div>

      <div class="p-chart" v-show="isShowB6">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B6 | temp3</span>
        </div>
        <div ref="canvans67" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b6.temp3"
        />
      </div>

      <div class="p-chart" v-show="isShowB6">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B6 | temp4</span>
        </div>
        <div ref="canvans68" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b6.temp4"
        />
      </div>

      <div class="p-chart" v-show="isShowB6">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B6 | temp5</span>
        </div>
        <div ref="canvans69" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b6.temp5"
        />
      </div>

      <div class="p-chart" v-show="isShowB6">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B6 | temp6</span>
        </div>
        <div ref="canvans70" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b6.temp6"
        />
      </div>

      <div class="p-chart" v-show="isShowB6">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B6 | temp7</span>
        </div>
        <div ref="canvans71" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b6.temp7"
        />
      </div>

      <div class="p-chart" v-show="isShowB6">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B6 | temp8</span>
        </div>
        <div ref="canvans72" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b6.temp8"
        />
      </div>

      <div class="p-chart" v-show="isShowB6">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B6 | temp9</span>
        </div>
        <div ref="canvans73" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b6.temp9"
        />
      </div>

      <div class="p-chart" v-show="isShowB6">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B6 | temp10</span>
        </div>
        <div ref="canvans74" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b6.temp10"
        />
      </div>

      <div class="p-chart" v-show="isShowB6">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B6 | temp11</span>
        </div>
        <div ref="canvans75" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b6.temp11"
        />
      </div>

      <div class="p-chart" v-show="isShowB6">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B6 | temp12</span>
        </div>
        <div ref="canvans76" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b6.temp12"
        />
      </div>

      <div class="p-chart" v-show="isShowB6">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B6 | temp13</span>
        </div>
        <div ref="canvans77" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b6.temp13"
        />
      </div>

      <div class="p-chart" v-show="isShowB6">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B6 | temp14</span>
        </div>
        <div ref="canvans78" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b6.temp14"
        />
      </div>

      <div class="p-chart" v-show="isShowB6">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B6 | temp15</span>
        </div>
        <div ref="canvans79" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b6.temp15"
        />
      </div>

      <div class="p-chart" v-show="isShowB6">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B6 | temp16</span>
        </div>
        <div ref="canvans80" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b6.temp16"
        />
      </div>
      <!-- b2 -->

      <div class="p-chart" v-show="isShowB7">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B7 | temp1</span>
        </div>
        <div ref="canvans81" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b7.temp1"
        />
      </div>

      <div class="p-chart" v-show="isShowB7">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B7 | temp2</span>
        </div>
        <div ref="canvans82" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b7.temp2"
        />
      </div>

      <div class="p-chart" v-show="isShowB7">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B7 | temp3</span>
        </div>
        <div ref="canvans83" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b7.temp3"
        />
      </div>

      <div class="p-chart" v-show="isShowB7">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B7 | temp4</span>
        </div>
        <div ref="canvans84" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b7.temp4"
        />
      </div>

      <div class="p-chart" v-show="isShowB7">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B7 | temp5</span>
        </div>
        <div ref="canvans85" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b7.temp5"
        />
      </div>

      <div class="p-chart" v-show="isShowB7">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B7 | temp6</span>
        </div>
        <div ref="canvans86" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b7.temp6"
        />
      </div>

      <div class="p-chart" v-show="isShowB7">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B7 | temp7</span>
        </div>
        <div ref="canvans87" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b7.temp7"
        />
      </div>

      <div class="p-chart" v-show="isShowB7">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B7 | temp8</span>
        </div>
        <div ref="canvans88" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b7.temp8"
        />
      </div>

      <div class="p-chart" v-show="isShowB7">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B7 | temp9</span>
        </div>
        <div ref="canvans89" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b7.temp9"
        />
      </div>

      <div class="p-chart" v-show="isShowB7">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B7 | temp10</span>
        </div>
        <div ref="canvans90" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b7.temp10"
        />
      </div>

      <div class="p-chart" v-show="isShowB7">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B7 | temp11</span>
        </div>
        <div ref="canvans91" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b7.temp11"
        />
      </div>

      <div class="p-chart" v-show="isShowB7">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B7 | temp12</span>
        </div>
        <div ref="canvans92" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b7.temp12"
        />
      </div>

      <div class="p-chart" v-show="isShowB7">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B7 | temp13</span>
        </div>
        <div ref="canvans93" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b7.temp13"
        />
      </div>

      <div class="p-chart" v-show="isShowB7">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B7 | temp14</span>
        </div>
        <div ref="canvans94" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b7.temp14"
        />
      </div>

      <div class="p-chart" v-show="isShowB7">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B7 | temp15</span>
        </div>
        <div ref="canvans95" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b7.temp15"
        />
      </div>

      <div class="p-chart" v-show="isShowB7">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">B7 | temp16</span>
        </div>
        <div ref="canvans96" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="b7.temp16"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { DailyReport, MonthReport } from "@/api/process";
import ReportEchart from "./reportEchart.vue";
//import StoveInfoReport from "./stoveInfo.vue";
export default {
  components: { ReportEchart },
  props: ["reportItem"],
  data() {
    return {
      //ShowStoveInfoReport: true,
      fullscreenLoading: true,
      isShowEcharts: true,
      reportData: {},
      Arr: [],
      echartsData: {},
      value: "", //用来判断是日报表还是月报表
      date: "", //报表日期
      b2: {
        temp1: [],
        temp2: [],
        temp3: [],
        temp4: [],
        temp5: [],
        temp6: [],
        temp7: [],
        temp8: [],
        temp9: [],
        temp10: [],
        temp11: [],
        temp12: [],
        temp13: [],
        temp14: [],
        temp15: [],
        temp16: [],
      },
      b3: {
        temp1: [],
        temp2: [],
        temp3: [],
        temp4: [],
        temp5: [],
        temp6: [],
        temp7: [],
        temp8: [],
        temp9: [],
        temp10: [],
        temp11: [],
        temp12: [],
        temp13: [],
        temp14: [],
        temp15: [],
        temp16: [],
      },
      b4: {
        temp1: [],
        temp2: [],
        temp3: [],
        temp4: [],
        temp5: [],
        temp6: [],
        temp7: [],
        temp8: [],
        temp9: [],
        temp10: [],
        temp11: [],
        temp12: [],
        temp13: [],
        temp14: [],
        temp15: [],
        temp16: [],
      },
      b5: {
        temp1: [],
        temp2: [],
        temp3: [],
        temp4: [],
        temp5: [],
        temp6: [],
        temp7: [],
        temp8: [],
        temp9: [],
        temp10: [],
        temp11: [],
        temp12: [],
        temp13: [],
        temp14: [],
        temp15: [],
        temp16: [],
      },
      b6: {
        temp1: [],
        temp2: [],
        temp3: [],
        temp4: [],
        temp5: [],
        temp6: [],
        temp7: [],
        temp8: [],
        temp9: [],
        temp10: [],
        temp11: [],
        temp12: [],
        temp13: [],
        temp14: [],
        temp15: [],
        temp16: [],
      },
      b7: {
        temp1: [],
        temp2: [],
        temp3: [],
        temp4: [],
        temp5: [],
        temp6: [],
        temp7: [],
        temp8: [],
        temp9: [],
        temp10: [],
        temp11: [],
        temp12: [],
        temp13: [],
        temp14: [],
        temp15: [],
        temp16: [],
      },
      isShowB2:true,
      isShowB3:true,
      isShowB4:true,
      isShowB5:true,
      isShowB6:true,
      isShowB7:true,
      bTotal: [],
    };
  },
  async created() {
    if (this.$route.query) {
      this.date = this.$route.query.times;
      console.log("query", this.$route.query);
    }
    await this.GetReportDataById();
    this.initEcharts();
    
  },
  mounted() {},
  methods: {
    downloadPDF() {
      this.isShowEcharts = false;
      this.GeneratepPicture();
      setTimeout(() => {
        this.fullscreenLoading = false;
        this.printpage();
      }, 2000);
    },
    GeneratepPicture() {
      this.fullscreenLoading = true;
      const mainCanvas = document.getElementsByTagName("canvas");
      for (let i = 0; i < mainCanvas.length; i++) {
        const item = mainCanvas[i];
        const imgRef = this.$refs["canvans" + i];
        const mainImg = new Image();
        const mainImgSrc = item.toDataURL("image/png");
        mainImg.src = mainImgSrc;
        mainImg.onload = () => {
          imgRef.innerHTML = `<img style="   width: 100%;height: 100%;" src=${mainImgSrc}>`; // 用图片替换 canvas
        };
      }
    },
    printpage() {
      // const oldInnerHtml = window.document.body.innerHTML
      window.document.body.innerHTML = this.$refs.reportDetailRef.innerHTML;
      window.print();
      window.location.reload();
      // window.document.body.innerHTML = oldInnerHtml
      return false;
    },

    // 获取数据信息
    async GetReportDataById() {
      const params = {
        theyName: "焙烧",
        createTime: this.date,
      };
      this.value = window.sessionStorage.getItem("value");
      console.log("value", this.value);
      if (this.value == 1) {
        const res = await DailyReport(params);
        this.reportData = res.data.data.pageData;
        this.echartsData = this.reportData[0].dataOne;
      } else if (this.value == 2) {
        const res = await MonthReport(params);
        this.reportData = res.data.data.pageData;
        this.echartsData = this.reportData[0].dataOne;
      }

      // for (let a = 0; a < this.reportData.length; a++) {
      //   if (this.reportData[a].createTime == this.date) {
      //     this.echartsData = this.reportData[a].dataOne;
      //   }
      // }
      console.log("echartsdata", this.echartsData);
      for (let i = 0; i < this.echartsData.length; i++) {
        let deviceName = this.echartsData[i].DTUId;
        let data = this.echartsData[i].dataOnes;
        for (let j = 0; j < this.echartsData[i].dataOnes.length; j++) {
          if (data[j].name == "temp1平均值") {
            let valueData = data[j].valueData;
            valueData.map((item) => {
              let arr = [item.times, item.value];
              if (deviceName == "b2") this.b2.temp1.push(arr);
              if (deviceName == "b3") this.b3.temp1.push(arr);
              if (deviceName == "b4") this.b4.temp1.push(arr);
              if (deviceName == "b5") this.b5.temp1.push(arr);
              if (deviceName == "b6") this.b6.temp1.push(arr);
              if (deviceName == "b7") this.b7.temp1.push(arr);
              var arr2 = ["createTime", "temp1"];
              this.b2.temp1.unshift(arr2);
              this.b3.temp1.unshift(arr2);
              this.b4.temp1.unshift(arr2);
              this.b5.temp1.unshift(arr2);
              this.b6.temp1.unshift(arr2);
              this.b7.temp1.unshift(arr2);
            });
          } else if (data[j].name == "temp2平均值") {
            let valueData = data[j].valueData;
            valueData.map((item) => {
              let arr = [item.times, item.value];
              if (deviceName == "b2") this.b2.temp2.push(arr);
              if (deviceName == "b3") this.b3.temp2.push(arr);
              if (deviceName == "b4") this.b4.temp2.push(arr);
              if (deviceName == "b5") this.b5.temp2.push(arr);
              if (deviceName == "b6") this.b6.temp2.push(arr);
              if (deviceName == "b7") this.b7.temp2.push(arr);
              var arr2 = ["createTime", "temp2"];
              this.b2.temp2.unshift(arr2);
              this.b3.temp2.unshift(arr2);
              this.b4.temp2.unshift(arr2);
              this.b5.temp2.unshift(arr2);
              this.b6.temp2.unshift(arr2);
              this.b7.temp2.unshift(arr2);
            });
          } else if (data[j].name == "temp3平均值") {
            let valueData = data[j].valueData;
            valueData.map((item) => {
              let arr = [item.times, item.value];
              if (deviceName == "b2") this.b2.temp3.push(arr);
              if (deviceName == "b3") this.b3.temp3.push(arr);
              if (deviceName == "b4") this.b4.temp3.push(arr);
              if (deviceName == "b5") this.b5.temp3.push(arr);
              if (deviceName == "b6") this.b6.temp3.push(arr);
              if (deviceName == "b7") this.b7.temp3.push(arr);
              var arr2 = ["createTime", "temp3"];
              this.b2.temp3.unshift(arr2);
              this.b3.temp3.unshift(arr2);
              this.b4.temp3.unshift(arr2);
              this.b5.temp3.unshift(arr2);
              this.b6.temp3.unshift(arr2);
              this.b7.temp3.unshift(arr2);
            });
          } else if (data[j].name == "temp4平均值") {
            let valueData = data[j].valueData;
            valueData.map((item) => {
              let arr = [item.times, item.value];
              if (deviceName == "b2") this.b2.temp4.push(arr);
              if (deviceName == "b3") this.b3.temp4.push(arr);
              if (deviceName == "b4") this.b4.temp4.push(arr);
              if (deviceName == "b5") this.b5.temp4.push(arr);
              if (deviceName == "b6") this.b6.temp4.push(arr);
              if (deviceName == "b7") this.b7.temp4.push(arr);
              var arr2 = ["createTime", "temp4"];
              this.b2.temp4.unshift(arr2);
              this.b3.temp4.unshift(arr2);
              this.b4.temp4.unshift(arr2);
              this.b5.temp4.unshift(arr2);
              this.b6.temp4.unshift(arr2);
              this.b7.temp4.unshift(arr2);
            });
          } else if (data[j].name == "temp5平均值") {
            let valueData = data[j].valueData;
            valueData.map((item) => {
              let arr = [item.times, item.value];
              if (deviceName == "b2") this.b2.temp5.push(arr);
              if (deviceName == "b3") this.b3.temp5.push(arr);
              if (deviceName == "b4") this.b4.temp5.push(arr);
              if (deviceName == "b5") this.b5.temp5.push(arr);
              if (deviceName == "b6") this.b6.temp5.push(arr);
              if (deviceName == "b7") this.b7.temp5.push(arr);
              var arr2 = ["createTime", "temp5"];
              this.b2.temp5.unshift(arr2);
              this.b3.temp5.unshift(arr2);
              this.b4.temp5.unshift(arr2);
              this.b5.temp5.unshift(arr2);
              this.b6.temp5.unshift(arr2);
              this.b7.temp5.unshift(arr2);
            });
          } else if (data[j].name == "temp6平均值") {
            let valueData = data[j].valueData;
            valueData.map((item) => {
              let arr = [item.times, item.value];
              if (deviceName == "b2") this.b2.temp6.push(arr);
              if (deviceName == "b3") this.b3.temp6.push(arr);
              if (deviceName == "b4") this.b4.temp6.push(arr);
              if (deviceName == "b5") this.b5.temp6.push(arr);
              if (deviceName == "b6") this.b6.temp6.push(arr);
              if (deviceName == "b7") this.b7.temp6.push(arr);
              var arr2 = ["createTime", "temp6"];
              this.b2.temp6.unshift(arr2);
              this.b3.temp6.unshift(arr2);
              this.b4.temp6.unshift(arr2);
              this.b5.temp6.unshift(arr2);
              this.b6.temp6.unshift(arr2);
              this.b7.temp6.unshift(arr2);
            });
          } else if (data[j].name == "temp7平均值") {
            let valueData = data[j].valueData;
            valueData.map((item) => {
              let arr = [item.times, item.value];
              if (deviceName == "b2") this.b2.temp7.push(arr);
              if (deviceName == "b3") this.b3.temp7.push(arr);
              if (deviceName == "b4") this.b4.temp7.push(arr);
              if (deviceName == "b5") this.b5.temp7.push(arr);
              if (deviceName == "b6") this.b6.temp7.push(arr);
              if (deviceName == "b7") this.b7.temp7.push(arr);
              var arr2 = ["createTime", "temp7"];
              this.b2.temp7.unshift(arr2);
              this.b3.temp7.unshift(arr2);
              this.b4.temp7.unshift(arr2);
              this.b5.temp7.unshift(arr2);
              this.b6.temp7.unshift(arr2);
              this.b7.temp7.unshift(arr2);
            });
          } else if (data[j].name == "temp8平均值") {
            let valueData = data[j].valueData;
            valueData.map((item) => {
              let arr = [item.times, item.value];
              if (deviceName == "b2") this.b2.temp8.push(arr);
              if (deviceName == "b3") this.b3.temp8.push(arr);
              if (deviceName == "b4") this.b4.temp8.push(arr);
              if (deviceName == "b5") this.b5.temp8.push(arr);
              if (deviceName == "b6") this.b6.temp8.push(arr);
              if (deviceName == "b7") this.b7.temp8.push(arr);
              var arr2 = ["createTime", "temp8"];
              this.b2.temp8.unshift(arr2);
              this.b3.temp8.unshift(arr2);
              this.b4.temp8.unshift(arr2);
              this.b5.temp8.unshift(arr2);
              this.b6.temp8.unshift(arr2);
              this.b7.temp8.unshift(arr2);
            });
          } else if (data[j].name == "temp9平均值") {
            let valueData = data[j].valueData;
            valueData.map((item) => {
              let arr = [item.times, item.value];
              if (deviceName == "b2") this.b2.temp9.push(arr);
              if (deviceName == "b3") this.b3.temp9.push(arr);
              if (deviceName == "b4") this.b4.temp9.push(arr);
              if (deviceName == "b5") this.b5.temp9.push(arr);
              if (deviceName == "b6") this.b6.temp9.push(arr);
              if (deviceName == "b7") this.b7.temp9.push(arr);
              var arr2 = ["createTime", "temp9"];
              this.b2.temp9.unshift(arr2);
              this.b3.temp9.unshift(arr2);
              this.b4.temp9.unshift(arr2);
              this.b5.temp9.unshift(arr2);
              this.b6.temp9.unshift(arr2);
              this.b7.temp9.unshift(arr2);
            });
          } else if (data[j].name == "temp10平均值") {
            let valueData = data[j].valueData;
            valueData.map((item) => {
              let arr = [item.times, item.value];
              if (deviceName == "b2") this.b2.temp10.push(arr);
              if (deviceName == "b3") this.b3.temp10.push(arr);
              if (deviceName == "b4") this.b4.temp10.push(arr);
              if (deviceName == "b5") this.b5.temp10.push(arr);
              if (deviceName == "b6") this.b6.temp10.push(arr);
              if (deviceName == "b7") this.b7.temp10.push(arr);
              var arr2 = ["createTime", "temp10"];
              this.b2.temp10.unshift(arr2);
              this.b3.temp10.unshift(arr2);
              this.b4.temp10.unshift(arr2);
              this.b5.temp10.unshift(arr2);
              this.b6.temp10.unshift(arr2);
              this.b7.temp10.unshift(arr2);
            });
          } else if (data[j].name == "temp11平均值") {
            let valueData = data[j].valueData;
            valueData.map((item) => {
              let arr = [item.times, item.value];
              if (deviceName == "b2") this.b2.temp11.push(arr);
              if (deviceName == "b3") this.b3.temp11.push(arr);
              if (deviceName == "b4") this.b4.temp11.push(arr);
              if (deviceName == "b5") this.b5.temp11.push(arr);
              if (deviceName == "b6") this.b6.temp11.push(arr);
              if (deviceName == "b7") this.b7.temp11.push(arr);
              var arr2 = ["createTime", "temp11"];
              this.b2.temp11.unshift(arr2);
              this.b3.temp11.unshift(arr2);
              this.b4.temp11.unshift(arr2);
              this.b5.temp11.unshift(arr2);
              this.b6.temp11.unshift(arr2);
              this.b7.temp11.unshift(arr2);
            });
          } else if (data[j].name == "temp12平均值") {
            let valueData = data[j].valueData;
            valueData.map((item) => {
              let arr = [item.times, item.value];
              if (deviceName == "b2") this.b2.temp12.push(arr);
              if (deviceName == "b3") this.b3.temp12.push(arr);
              if (deviceName == "b4") this.b4.temp12.push(arr);
              if (deviceName == "b5") this.b5.temp12.push(arr);
              if (deviceName == "b6") this.b6.temp12.push(arr);
              if (deviceName == "b7") this.b7.temp12.push(arr);
              var arr2 = ["createTime", "temp12"];
              this.b2.temp12.unshift(arr2);
              this.b3.temp12.unshift(arr2);
              this.b4.temp12.unshift(arr2);
              this.b5.temp12.unshift(arr2);
              this.b6.temp12.unshift(arr2);
              this.b7.temp12.unshift(arr2);
            });
          } else if (data[j].name == "temp13平均值") {
            let valueData = data[j].valueData;
            valueData.map((item) => {
              let arr = [item.times, item.value];
              if (deviceName == "b2") this.b2.temp13.push(arr);
              if (deviceName == "b3") this.b3.temp13.push(arr);
              if (deviceName == "b4") this.b4.temp13.push(arr);
              if (deviceName == "b5") this.b5.temp13.push(arr);
              if (deviceName == "b6") this.b6.temp13.push(arr);
              if (deviceName == "b7") this.b7.temp13.push(arr);
              var arr2 = ["createTime", "temp13"];
              this.b2.temp13.unshift(arr2);
              this.b3.temp13.unshift(arr2);
              this.b4.temp13.unshift(arr2);
              this.b5.temp13.unshift(arr2);
              this.b6.temp13.unshift(arr2);
              this.b7.temp13.unshift(arr2);
            });
          } else if (data[j].name == "temp14平均值") {
            let valueData = data[j].valueData;
            valueData.map((item) => {
              let arr = [item.times, item.value];
              if (deviceName == "b2") this.b2.temp14.push(arr);
              if (deviceName == "b3") this.b3.temp14.push(arr);
              if (deviceName == "b4") this.b4.temp14.push(arr);
              if (deviceName == "b5") this.b5.temp14.push(arr);
              if (deviceName == "b6") this.b6.temp14.push(arr);
              if (deviceName == "b7") this.b7.temp14.push(arr);
              var arr2 = ["createTime", "temp14"];
              this.b2.temp14.unshift(arr2);
              this.b3.temp14.unshift(arr2);
              this.b4.temp14.unshift(arr2);
              this.b5.temp14.unshift(arr2);
              this.b6.temp14.unshift(arr2);
              this.b7.temp14.unshift(arr2);
            });
          } else if (data[j].name == "temp15平均值") {
            let valueData = data[j].valueData;
            valueData.map((item) => {
              let arr = [item.times, item.value];
              if (deviceName == "b2") this.b2.temp15.push(arr);
              if (deviceName == "b3") this.b3.temp15.push(arr);
              if (deviceName == "b4") this.b4.temp15.push(arr);
              if (deviceName == "b5") this.b5.temp15.push(arr);
              if (deviceName == "b6") this.b6.temp15.push(arr);
              if (deviceName == "b7") this.b7.temp15.push(arr);
              var arr2 = ["createTime", "temp15"];
              this.b2.temp15.unshift(arr2);
              this.b3.temp15.unshift(arr2);
              this.b4.temp15.unshift(arr2);
              this.b5.temp15.unshift(arr2);
              this.b6.temp15.unshift(arr2);
              this.b7.temp15.unshift(arr2);
            });
          } else if (data[j].name == "temp16平均值") {
            let valueData = data[j].valueData;
            valueData.map((item) => {
              let arr = [item.times, item.value];
              if (deviceName == "b2") this.b2.temp16.push(arr);
              if (deviceName == "b3") this.b3.temp16.push(arr);
              if (deviceName == "b4") this.b4.temp16.push(arr);
              if (deviceName == "b5") this.b5.temp16.push(arr);
              if (deviceName == "b6") this.b6.temp16.push(arr);
              if (deviceName == "b7") this.b7.temp16.push(arr);
              var arr2 = ["createTime", "temp16"];
              this.b2.temp16.unshift(arr2);
              this.b3.temp16.unshift(arr2);
              this.b4.temp16.unshift(arr2);
              this.b5.temp16.unshift(arr2);
              this.b6.temp16.unshift(arr2);
              this.b7.temp16.unshift(arr2);
            });
          }
        }
      }
      // 加载完毕 设置为false
      this.fullscreenLoading = false;
    },
    initEcharts() {
      var totalZero = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
      var bTotal = [];
      this.Arr = this.echartsData;
      let ifExist = false; //判断设备有没有数据
      this.Arr.forEach((item) => {
        if (item.DTUId == "b2") {
          ifExist = true;
          for (let k = 0; k < item.dataOnes.length; k++) {
            let j = k + 7;
            if (j >= 16) {
              j -= 16;
            }
            bTotal.push(parseInt(item.dataOnes[j].average));
          }
        }
      });
      if (ifExist == false) {
        totalZero.forEach((item) => {
          bTotal.push(item);
        });//没有数据的设备填充数据为0
        this.isShowB2 = false
      }
      ifExist = false; //重置ifExist

      this.Arr.forEach((item) => {
        if (item.DTUId == "b3") {
          ifExist = true;
          for (let k = 0; k < item.dataOnes.length; k++) {
            let j = k + 7;
            if (j >= 16) {
              j -= 16;
            }
            bTotal.push(parseInt(item.dataOnes[j].average));
          }
        }
      });
      if (ifExist == false) {
        totalZero.forEach((item) => {
          bTotal.push(item);
        });
        this.isShowB3 = false
      }
      ifExist = false; //重置ifExist

      this.Arr.forEach((item) => {
        if (item.DTUId == "b4") {
          ifExist = true;
          for (let k = 0; k < item.dataOnes.length; k++) {
            let j = k + 7;
            if (j >= 16) {
              j -= 16;
            }
            bTotal.push(parseInt(item.dataOnes[j].average));
          }
        }
      });
      if (ifExist == false) {
        totalZero.forEach((item) => {
          bTotal.push(item);
        });
        this.isShowB4 = false
      }
      ifExist = false; //重置ifExist

      this.Arr.forEach((item) => {
        if (item.DTUId == "b5") {
          ifExist = true;
          for (let k = 0; k < item.dataOnes.length; k++) {
            let j = k + 7;
            if (j >= 16) {
              j -= 16;
            }
            bTotal.push(parseInt(item.dataOnes[j].average));
          }
        }
      });
      if (ifExist == false) {
        totalZero.forEach((item) => {
          bTotal.push(item);
        });
        this.isShowB5 = false
      }
      ifExist = false; //重置ifExist
      this.Arr.forEach((item) => {
        if (item.DTUId == "b6") {
          ifExist = true;
          for (let k = 0; k < item.dataOnes.length; k++) {
            let j = k + 7;
            if (j >= 16) {
              j -= 16;
            }
            bTotal.push(parseInt(item.dataOnes[j].average));
          }
        }
      });
      if (ifExist == false) {
        totalZero.forEach((item) => {
          bTotal.push(item);
        });
        this.isShowB6 = false
      }
      ifExist = false; //重置ifExist

      this.Arr.forEach((item) => {
        if (item.DTUId == "b7") {
          ifExist = true;
          for (let k = 0; k < item.dataOnes.length; k++) {
            let j = k + 7;
            if (j >= 16) {
              j -= 16;
            }
            bTotal.push(parseInt(item.dataOnes[j].average));
          }
        }
      });
      if (ifExist == false) {
        totalZero.forEach((item) => {
          bTotal.push(item);
        });
        this.isShowB7 = false
      }
      ifExist = false; //重置ifExist
      // for (let i = 0; i < this.echartsData.length; i++) {
      //   if (this.Arr[i].DTUId == "b2") {
      //     for (let k = 0; k < this.Arr[i].dataOnes.length; k++) {
      //       let j = k + 7;
      //       if (j >= 16) {
      //         j -= 16;
      //       }
      //       bTotal.push(parseInt(this.Arr[i].dataOnes[j].average));
      //     }
      //   } else if (this.Arr[i].DTUId == "b3") {
      //     for (let k = 0; k < this.Arr[i].dataOnes.length; k++) {
      //       let j = k + 7;
      //       if (j >= 16) {
      //         j -= 16;
      //       }
      //       bTotal.push(parseInt(this.Arr[i].dataOnes[j].average));
      //     }
      //   } else if (this.Arr[i].DTUId == "b4") {
      //     for (let k = 0; k < this.Arr[i].dataOnes.length; k++) {
      //       let j = k + 7;
      //       if (j >= 16) {
      //         j -= 16;
      //       }
      //       bTotal.push(parseInt(this.Arr[i].dataOnes[j].average));
      //     }
      //   } else if (this.Arr[i].DTUId == "b5") {
      //     for (let k = 0; k < this.Arr[i].dataOnes.length; k++) {
      //       let j = k + 7;
      //       if (j >= 16) {
      //         j -= 16;
      //       }
      //       bTotal.push(parseInt(this.Arr[i].dataOnes[j].average));
      //     }
      //   } else if (this.Arr[i].DTUId == "b6") {
      //     for (let k = 0; k < this.Arr[i].dataOnes.length; k++) {
      //       let j = k + 7;
      //       if (j >= 16) {
      //         j -= 16;
      //       }
      //       bTotal.push(parseInt(this.Arr[i].dataOnes[j].average));
      //     }
      //   } else if (this.Arr[i].DTUId == "b7") {
      //     for (let k = 0; k < this.Arr[i].dataOnes.length; k++) {
      //       let j = k + 7;
      //       if (j >= 16) {
      //         j -= 16;
      //       }
      //       bTotal.push(parseInt(this.Arr[i].dataOnes[j].average));
      //     }
      //   }
      // }
      // totalZero.forEach((item) => {
      //   bTotal.push(item);
      // });
      this.bTotal = bTotal;
      console.log("btotal", this.bTotal);
      var x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
      var y = ["B2", "B3", "B4", "B5", "B6", "B7"];

      var data = [];
      var min = Infinity;
      var max = -Infinity;

      let a = -1;

      for (let j = 0; j < y.length; j++) {
        for (let i = 0; i < x.length; i++) {
          a += 1;
          // console.log(a, 222)
          // const v = Math.trunc(Math.random() * 1e3)
          // console.log(v)
          if (this.bTotal[a] < min) {
            min = this.bTotal[a];
          }
          if (this.bTotal[a] > max) {
            max = this.bTotal[a];
          }
          data.push([i, j, this.bTotal[a]]);
        }
      }
      var mycharts = this.$echarts.init(
        document.getElementById("middleEcharts")
      );

      var option = {
        grid: [
          {
            containLabel: false,
            top: "8%",
            right: "5%",
            bottom: "20%",
            left: "10%",
          },
        ],
        xAxis: [
          {
            type: "category",

            gridIndex: 0,
            nameGap: 0,

            data: x,
            axisLabel: {
              margin: 14,
              color: "rgba(20,30,40)",
            },

            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            name: "温控架",
            gridIndex: 0,
            nameGap: 0,
            nameTextStyle: {
              align: "right",
              verticalAlign: "bottom",
              padding: [0, 14, 0, 0],
              color: "rgba(20,30,40)",
            },
            data: y,
            axisLabel: {
              margin: 14,
              color: "rgba(20,30,40)",
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        visualMap: [
          {
            min: 1,
            max: 1200,
            seriesIndex: 0,
            padding: 0,
            calculable: true,
            orient: "horizontal",
            inverse: true,
            top: "90%",
            right: "40%",
            itemWidth: 18,
            itemHeight: 114,
            inRange: {
              color: ["rgb(252,228,214)", "rgb(248,203,173)", "rgb(198,89,17)"],
              symbolSize: [100, 100],
            },
            text: ["高", "低"],
            textGap: 8,
            textStyle: {
              color: "rgba(20,30,40)",
            },
          },
        ],
        series: [
          {
            name: "Punch Card",
            type: "heatmap",
            data: data,
            gridIndex: 0,
            xAxisIndex: 0,
            yAxisIndex: 0,
            label: {
              show: true,
              // formatter: (p) => {
              //   const v = p.value[2]
              //   return `${v}`
              // },
              // textShadowColor: '#00e9f9',
              color: "rgb(20,30,40)",
              textShadowBlur: 6,
              fontSize: 14,
              // align: 'left'
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: "rgba(12,145,255,.2)",
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
        backgroundColor: "rgb(255,255,255)",
      };

      mycharts.setOption(option);
    },
  },
};
</script>

<style>
@media print {
  body {
    -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
    -ms-print-color-adjust: exact;
    margin: 1cm;
    page-break-before: auto;
  }
  @page {
    margin: 0;
  }
  .NoEchart {
    display: none;
  }
  /* 这是占位元素分隔 页面 */
  .placeholder {
    page-break-before: always;
    height: 30px;
  }
  .placeholder2 {
    height: 10px;
  }
  .placeholder3 {
    height: 30px;
  }
}
</style>
<style   scoped>
#report-container {
  overflow: auto;
  height: 100%;
  width: 100%;
}
.container {
  padding: 20px;
  margin: 0 auto;
  display: block;
  width: 740px;
  background: #fff;
}

.head {
  height: 40px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  margin-top: 14px;
  &-left {
    width: 5px;
    height: 30px;
    background-color: #01bb70;
  }
  &-number {
    margin-left: 8px;
    height: 25px;
    line-height: 25px;
  }
  &-right {
    margin-left: auto;
    padding: 0 10px;
    background-color: #f2f2f2;
    height: 25px;
    border-radius: 12px;
    line-height: 25px;
    text-align: center;
  }
}
.middleEcharts {
  height: 400px;
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.p-head {
  height: 40px;
  display: flex;
  align-items: center;
  margin-top: 30px;
  &-status {
    margin-left: 150px;
    padding: 7px;
    border-radius: 15px;
    background-color: #f2f2f2;
  }
  &-left {
    width: 5px;
    height: 30px;
    background-color: #01bb70;
  }
  &-right {
    margin-left: auto;
    padding: 0 10px;
    background-color: #f2f2f2;
    height: 25px;
    border-radius: 12px;
    line-height: 25px;
    text-align: center;
  }
}
table {
  border-collapse: collapse;
}
tr td {
  padding: 10px;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid rgba(236, 236, 236, 0.5);
}
.head-tag {
  background-color: #ffffff;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: 80px;
  justify-items: center;
  align-items: center;
  font-size: 14px;
  &-item {
    position: relative;
  }
  .head-tag-item::before {
    content: "";
    position: absolute;
    right: -60px;
    bottom: 0;
    width: 1px;
    height: 100%;
    background: #d9d9d9;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }

  .tag-title {
    color: #01bb70;
    text-align: center;
  }
  .tag-type {
    margin-top: 10px;
    width: 60px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #9d9d9d;
  }
  .tag-bottom {
    color: #bebebe;
    text-align: center;
  }
  .tag-bottom-text {
    color: #55c0bc;
  }
}
</style>
